<template>
  <div class="comment-comp text-primary-500 w-full p-4">
    <div class="header-row flex justify-between">
      <div class="comment-cnt">{{ commentsCnt }}条评论</div>
    </div>

    <el-divider></el-divider>

    <div class="comment-container w-full flex justify-between">
      <div class="user-avatar border-none mr-4">
        <el-avatar :src="userAvatar" :size="78"></el-avatar>
      </div>

      <div class="comment-main flex-1">
        <div class="comment-content mb-4">
          <el-input
            v-model="commentContent"
            type="textarea"
            :autosize="{ minRows: 3 }"
            placeholder="快发表你独特的观点吧~"
          >
          </el-input>
        </div>

        <div class="comment-opers-row flex justify-between mb-4">
          <div class="comment-feature">
            <i class="el-icon-warning-outline"></i>
            支持Markdown语法
          </div>

          <div class="comment-opers">
            <el-popover placement="top">
              <div class="prose" v-html="previewComment()"></div>
              <el-button
                slot="reference"
                class="comment-oper oper-preview-btn ml-2"
              >
                预览
              </el-button>
            </el-popover>

            <el-button
              type="success"
              class="comment-oper oper-submit-btn ml-2"
              @click="onSubmitComment"
            >
              留言
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <div v-if="commentsCnt === 0" class="footer-no-comments text-center">
      来做第一个留言的人吧！
    </div>

    <div v-else class="footer-comments">
      <NcCommentItem
        v-for="(commentItem, index) in commentList"
        :key="index"
        :user-id="commentItem.user_id"
        :comment-id="commentItem._id"
        :comment-content="commentItem.content"
        :user-avatar="commentItem.user_avatar"
        :user-nickname="commentItem.user_nickname"
        :comment-time="commentItem.create_time"
        class="comment-item mb-2"
        @update="updateCommentList"
      >
      </NcCommentItem>
    </div>
    <NcLoginDialog ref="login" :modal="false"></NcLoginDialog>
  </div>
</template>

<script>
import { ElDivider, ElButton, ElInput } from 'element-ui'
import { mapState } from 'vuex'
import NcLoginDialog from '../login-comp/NcLoginDialog'
import NcCommentItem from './NcCommentItem'

export default {
  name: 'NcGitalk',
  components: { NcLoginDialog, NcCommentItem },
  props: {
    userLoginStatus: {
      type: Number,
      default: 0,
    },
    documentId: {
      type: String,
      default: null,
    },
  },
  async fetch() {
    await this.updateCommentList()
  },

  data() {
    return {
      commentContent: '',
      commentList: [],
      defaultUserNickname: '神秘游客',
      defaultUserAvatar:
        'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/1200px-Octicons-mark-github.svg.png',
      LoginDialogVisible: false,
    }
  },

  computed: {
    ...mapState(['user']),
    commentsCnt() {
      return this.commentList.length
    },
    userNickname() {
      return this.user.nickname || this.defaultUserNickname
    },
    userAvatar() {
      return this.user.avatar || this.defaultUserAvatar
    },
  },

  methods: {
    async updateCommentList() {
      const commentList = await this.$http.$get(
        this.$api.apps.post.comment.query.path,
        {
          params: { to_id: this.documentId },
        }
      )
      this.$set(this, 'commentList', commentList)
    },
    showLoginDialog() {
      this.$refs.loginDialog.loginDialogVisible = !this.$refs.loginDialog
        .LoginDialogVisible
    },
    async onSubmitComment() {
      if (!this.commentContent) {
        return this.$message.error('你好像啥也没输入呢！')
      }
      if (!this.$store.state.user.hasLogined) {
        this.$refs.login.handleOpen()
        return this.$message.error('登录后才可以发表评论哦~')
      }

      await this.$http.post(this.$api.apps.post.comment.add.path, {
        user_id: this.user.id,
        content: this.commentContent,
        to_id: this.documentId,
        is_document: true,
      })
      await this.$fetch()
      this.commentContent = ''
      this.$message.success('留言提交成功~')
    },

    previewComment() {
      const md = require('marked')
      const mdContent = md(this.commentContent)
      console.log({ mdContent })
      return mdContent
    },
  },
}
</script>
